<template>
  <div class="main">
    <div class="content">
      <div class="page">
        <div class="page-content">
          <div class="content-auto">
            <div style="font-size:0">
              <img v-if="userLanguage.code == 'zh_CN'" src="@/assets/images/public/parcel-head-zh.png"
                class="parcel-head" alt="">
              <img v-else src="@/assets/images/public/parcel-head-en.png" class="parcel-head" alt="">
            </div>
            <div>
              <user-shipping-address v-if="orderInfo && orderInfo.orderAddress" ref="userShipRef"
                :default-address="orderInfo.orderAddress" addressType="parcel"
                @on-change="onSelectAddr"></user-shipping-address>
            </div>
            <div class="cancel-area-time" v-if="dataInfo.timestamp && orderInfo.autoCancelTime && orderInfo.autoCancelTime > 0 && orderInfo.autoCancelTime > dataInfo.timestamp">
							<img src="@/assets/images/parcel/parcel-down-time.png" class="area-time-icon" alt="">
							<div>
								{{ $t('wayBill.cancel_label_text') }}:
							</div>
              <count-down style="margin-left:4px;font-weight: bold;" :current-time="dataInfo.timestamp"
                :end-time="orderInfo.autoCancelTime"></count-down>
            </div>
            <div class="tip-area" v-if="feeCost && feeCost.countryTips">
              <Icon type="ios-information-circle" size="18" color="#FF186B" /> Tips:
              <span class="text">{{ feeCost.countryTips }}</span>
            </div>
          </div>
        </div>
        <div class="page-content mt-24">
          <div class="content-auto parcel-content">
            <!-- 产品列表 -->
            <div class="product-title">{{ $t('submitParcel.brandList') }}</div>
            <div class="product-list">
              <div class="list-th">
                <Row class="th-row">
                  <Col :span="5" class="th-col">
                  <div class="th-name">{{ $t("submitParcel.product") }}</div>
                  </Col>
                  <Col :span="6" class="th-col">
                  <div class="th-name">{{ $t('submitParcel.parcelName') }}</div>
                  </Col>
                  <Col :span="3" class="th-col">
                  <div class="th-name">{{ $t("submitParcel.quantity") }}</div>
                  </Col>
                  <Col :span="3" class="th-col">
                  <div class="th-name">{{ $t("submitParcel.weight") }}（g）</div>
                  </Col>
                  <Col :span="3" class="th-col">
                  <div class="th-name">{{ $t("submitParcel.dimension") }}</div>
                  </Col>
                  <Col :span="4" class="th-col">
                  <div class="th-name">{{ $t('submitParcel.itemCategory') }}</div>
                  </Col>
                </Row>
              </div>
              <div v-for="(item, index) in orderInfo.orderItemList" :key="item.orderItemNo">
                <div class="list-td" v-if="(index == 0 && !upDown) || upDown">
                  <Row class="td-row">
                    <Col :span="5" class="td-col">
                    <div class="td-img">
                      <img v-if="item.mainImg" :src="item.mainImg" alt="" class="img-main"
                        @click="onViewImage(item.mainImg)" />
                      <img v-else class="img-img" src="@/assets/images/public/default-image.png" alt="" />
                    </div>
                    </Col>
                    <Col :span="6" class="td-col">
                    <div class="td-name">
                      <div class="name-title">{{ item.subject }}</div>
                      <div class="name-sku" v-if="item.skuAttrEnumFormatList && item.skuAttrEnumFormatList.length">
                        <span class="sku-span" v-for="(i, k) in item.skuAttrEnumFormatList" :key="k">{{ i.name }}:{{
                          i.value }}</span>
                      </div>
                    </div>
                    </Col>
                    <Col :span="3" class="td-col">
                    <div class="td-num">
                      {{ item.quantity }}
                    </div>
                    </Col>
                    <Col :span="3" class="td-col">
                    <div class="td-num">
                      {{ item.weight }}
                    </div>
                    </Col>
                    <Col :span="3" class="td-col">
                    <div class="td-num">
                      {{ item["length"] }}*{{ item.width }}*{{ item.height }}
                    </div>
                    </Col>
                    <Col :span="4" class="td-col">
                    <div class="td-center" v-if="item.categoryName">
                      <Tooltip placement="top-start" max-width="500" transfer>
                        <div slot="content">
                          {{ $t('submitParcel.tagSub') }}
                        </div>
                        <div class="td-type">
                          <div class="type-name type-icon">{{ item.categoryName || '' }}</div>
                          <div class="iconfont icon-bangzhu type-icon"></div>
                        </div>
                      </Tooltip>
                    </div>
                    </Col>
                  </Row>
                  <Row v-if="item.checkPhotos && item.checkPhotos.length">
                    <Col :span="5">
                    </Col>
                    <Col :span="19">
                    <div class="td-qc">
                      <div class="qc-title">{{ $t('submitParcel.freePhotos') }}：</div>
                      <div class="qc-list" v-for="(i, k) in item.checkPhotos" :key="k">
                        <img :src="i" alt="" class="list-img" @click="onViewImage(i)" />
                      </div>
                    </div>
                    </Col>
                  </Row>
                  <div class="td-line" v-if="orderInfo.orderItemList.length > 1"></div>
                </div>
              </div>
              <div class="list-up" @click="upDown = !upDown" v-if="orderInfo.orderItemList.length > 1">
                <div class="up-text">{{ upDown ? $t('goods.collapse') : $t('submitParcel.expand') }}</div>
                <img v-if="upDown" src="@/assets/images/home/up-arrow.png" class="up-icon" alt="" />
                <img v-if="!upDown" src="@/assets/images/home/search-arrow.png" class="up-icon" alt="" />
              </div>
            </div>
            <!-- 打包方式 -->
            <div class="pack-type">
              <div class="type-left">
                <span class="left-red">*</span>
                {{ $t('submitParcel.packType') }}
              </div>
              <div class="type-right">
                <RadioGroup v-model="disabledGroup" @on-change="selectPackType">
                  <Radio v-for="item in parcelTypeArr" :label="item.name" :key="item.id"
                    :disabled="minimalPack == 'N' && item.packageWeight == 'EXCLUDE' ? true : false"
                    :style="{ opacity: (minimalPack == 'N' && item.packageWeight == 'EXCLUDE') ? 0.5 : 1 }">
                    <Tooltip placement="top-start" max-width="320" transfer>
                      <div slot="content">
                        <img width="300" :src="item.examplePicture" alt="" />
                        <p v-if="item.charge && item.chargeUnit">{{ item.charge }}{{ item.chargeUnit }}</p>
                        <p>{{ item.description }}</p>
                      </div>
                      <div class="item-tip">
                        {{ item.name }} <span class="iconfont icon-bangzhu tip-icon"></span>
                      </div>
                    </Tooltip>
                    <div class="item-charge item-label" v-if="item.isCharge">
                      {{ $t("submitParcel.charge_service_text") }}
                    </div>
                    <div class="item-free item-label" v-else>{{ $t("submitParcel.is_free") }}</div>
                  </Radio>
                </RadioGroup>
              </div>
            </div>
            <!-- 包装详情 -->
            <div class="pack-type" style="border: none;margin-top: 24px;padding-bottom: 8px;">
              <div class="type-left">
                {{ $t('submitParcel.parcel_detail_text') }}
              </div>
              <div class="type-right">
                <Checkbox v-for="item in parcelDetailArr" :key="item.id" :true-value="true" :false-value="false"
                  v-model="item.active" class="right-item" @on-change="selectParcelDetail" size="large">
                  <Tooltip placement="top-start" max-width="320" transfer>
                    <div slot="content">
                      <img width="300" :src="item.examplePicture" alt="" />
                      <!-- <p v-if="item.charge && item.chargeUnit">{{ item.charge }}{{ item.chargeUnit }}</p> -->
                      <p>{{ item.description }}</p>
                    </div>
                    <div class="item-tip">
                      {{ item.name }} <span class="iconfont icon-bangzhu tip-icon"></span>
                    </div>
                  </Tooltip>
                  <div class="item-charge item-label" v-if="item.isCharge">
                    {{ $t("submitParcel.charge_service_text") }}
                  </div>
                  <div class="item-free item-label" v-else>{{ $t("submitParcel.is_free") }}</div>
                </Checkbox>
              </div>
            </div>
            <!-- 备注 -->
            <div class="parcel-remarks">
              <div class="card-tip-text">{{ $t('submitParcel.text_tip_pink') }}</div>
              <Input class="remarks-textarea" v-model="form.remarks" type="textarea" show-word-limit maxlength="1000"
                :rows="6" :placeholder="$t('submitParcel.specialRequests')" />
            </div>
            <!-- 邮寄路线 -->
            <div class="product-title mt-32">
              <span class="col-p">*</span>
              {{ $t('submitParcel.mailingRoute') }}
            </div>
            <!-- 已选择路线 -->
            <!-- <div v-if="currentRoute" class="parcel-route">
              <logistics-item :item="currentRoute" itemType="edit" @modifyRouter="modifyRouter"></logistics-item>
            </div> -->
            <!-- 路线选择列表 -->
            <!-- <div v-else>
              <t-loading v-if="routeLoading"></t-loading>
              <div v-if="logisticsList.length">
                <div class="parcel-route" v-for="(item, index) in logisticsList" :key="index"
                  :class="{ 'parcel-op': !item.isCarriable }">
                  <logistics-item :item="item" itemType="confirm" @confirm="confirmRoute"></logistics-item>
                </div>
              </div>
            </div> -->
						<!-- 路线列表 -->
						<div v-if="logisticsList.length" class="mt-16 routes-lists">
							<!-- 表格头 -->
							<div class="routes-head bg-f5f flex f-14 lin-14 col-888 ff-regular">
								<div class="routes-check"></div>
								<!-- 品牌信息 -->
								<div class="routes-msg flex a-c">
									{{$t('submitParcel.parcelRouteTr1')}}
								</div>
								<!-- 保障 -->
								<div class="routes-insure flex a-c">
									{{$t('submitParcel.parcelRouteTr2')}}
								</div>
								<!-- 运输费用 -->
								<div class="routes-price flex a-c">
									{{ $t("estimation.transportationCosts") }}
								</div>
								<!-- 寄送周期 -->
								<div class="routes-day flex a-c">
									{{ $t('user.shippingCycle') }}({{ $t('estimation.workday') }})
								</div>
								<!-- 注意事项 -->
								<div class="routes-remark flex a-c">
									{{$t('submitParcel.parcelRouteTr3')}}
								</div>
							</div>
							<!-- 列表 -->
							<div v-for="(item, index) in logisticsList" :key="index">
								<logistics-item 
									v-if="!currentRoute || (currentRoute && currentRoute.routeId && currentRoute.routeId == item.routeId)"
									:item="item" 
									@confirm="confirmRoute" 
									@del="delRoute"
									:itemIndex="index" 
									:itemLength="logisticsList.length"
									:itemActiveId="currentRoute && currentRoute.routeId ? currentRoute.routeId : ''"
									>
									<div v-if="currentRoute && currentRoute.routeId && currentRoute.routeId == item.routeId" class="bg-f5f routes-other">
										<Timeline>
											<!-- 缴纳方式 -->
											<TimelineItem>
											  <div class="flex a-c lin-24 f-16 bold ff-bold">
													<div class="col-222">
														{{ $t("submitParcel.paymentMethod") }}：
													</div>
													<div class="col-ff1">
														{{ $t("submitParcel.recipientPayment") }}
													</div>
												</div>
												<div class="col-888 f-14 lin-22 ff-regular mt-4">
													{{ $t("submitParcel.countryDestination") }}
												</div>
												<div v-if="taxRequired === 'Y' || currentRoute.skipPrepaid || insure == 'Y'" class="pt-30"></div>
											</TimelineItem>
											<!-- 税号 -->
											<TimelineItem v-if="taxRequired === 'Y'" class="timeline-30">
												<div class="f-16 lin-24 bold ff-bold col-222">
													<span class="col-ff1">*</span> {{ $t('submitParcel.num_tax_label') }}
												</div>
												<div class="parcel-duty mt-4">
												  <Input :class="showError ? 'err-bor ff-regular' : 'duty-input ff-regular'" v-model="form.taxNumber"
												    :placeholder="$t('submitParcel.tax_num_tip')" />
												</div>
												<!-- 税号未填提示 -->
												<div v-if="showError" class="mt-8 col-ff1 f-12 lin-18">
													{{ $t('submitParcel.err_tip_text') }}
												</div>
												<div class="mt-8 col-888 f-12 lin-18">
													{{ $t('submitParcel.pleaseProvide', { countryText: countryName }) }}
												</div>
												<!-- 物流免责声明 -->
												<div class="mt-8 bg-6e7 p-16 f-14 lin-22 ff-regular col-d47">
													<div class="ff-bold bold">
														{{ $t('submitParcel.logisticsDisclaimer') }}:
													</div>
													<div class="mt-4">
													  {{ $t('submitParcel.logistics1') }}
													</div>
													<div>
													  {{ $t('submitParcel.logistics2') }}
													</div>
												</div>
												<div v-if="currentRoute.skipPrepaid || insure == 'Y'" class="pt-30"></div>
											</TimelineItem>
											<!-- 预包装 -->
											<TimelineItem v-if="currentRoute.skipPrepaid" class="timeline-30">
												<div class="flex a-c">
													<div class="f-16 lin-24 bold ff-bold col-222 mr-10">
														{{ $t('submitParcel.preview_label') }}
													</div>
													<i-switch v-model="form.skipPrepaid" @on-change="changeSwitch"></i-switch>
												</div>
												<div class="mt-4 f-14 lin-22 col-888 ff-regular">
													<div>{{ $t('submitParcel.preview_tip1') }}</div>
													<div>{{ $t('submitParcel.preview_tip2') }}</div>
													<div class="col-e42">{{ $t('submitParcel.preview_tip4') }}</div>
												</div>
												<div v-if="insure == 'Y'" class="pt-30"></div>
											</TimelineItem>
											<!-- 购买保障 -->
											<TimelineItem v-if="insure == 'Y'">
												<insure-com 
													ref="insureRef"
													:insure="insure" 
													:insuranceInfoList="insuranceInfoList" 
													:costRelated="feeCost"
												  @switchMet="switchOpenMet" 
													@insureSel="insureSel" 
													>
												</insure-com>
											</TimelineItem>
										</Timeline>
									</div>
								</logistics-item>
							</div>
						</div>
            <!-- 无可用物流路线 -->
            <div v-if="logisticsList.length == 0 && !routeLoading" class="bg-f5f empty-route mt-16 flex a-c j-c">
							<div>
								<img src="@/assets/images/public/new-empty.png" class="empty-icons" alt="" />
								<div class="t-c f-14 lin-20 col-888 ff-regular">
									{{ $t("user.noLogistics") }}
								</div>
							</div>
            </div>
          </div>
        </div>
        <div class="all-select-footer">
          <div class="footer-content">
            <div class="footer-head">
              <!-- 预计包裹重量暂时隐藏掉,下面这个div是占位用的 -->
              <div></div>
              <!-- <div class="weight-text">
                {{ $t('user.forecast_weight') }}
                <Tooltip max-width="300" placement="top" transfer>
                  <Icon type="ios-help-circle-outline" size="18" style="cursor: pointer;" />
                  {{ currentRoute.calcWeight || 0 }}g
                  <div slot="content" class="weight-tip">{{ $t('user.weight_tip') }}</div>
                </Tooltip>
              </div> -->
              <div>
                <div class="top">
                  <div class="left j-e">
                    <Checkbox class="select" v-model="checkboxValue">
                      <span class="text">{{ $t("submitParcel.awareness") }}</span>
                    </Checkbox>
                    <div class="right">
                      <router-link :to="`/notice/${taxAgreement.id}`" target="_blank" class="tag">{{
                        $t("submitParcel.taxReminder") }}</router-link>
                      <router-link :to="`/notice/${noticeAgreement.id}`" target="_blank" class="tag">{{
                        $t("submitParcel.logisticsReminder") }}</router-link>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="left"></div>
                  <div class="right">
                    <div class="pay-amount">
                      <div class="actual-payable">
                        <span class="label pay-label">{{ $t("pay.unpaid_total_price") }}：</span>
                        <Tooltip placement="top" transfer>
                          <span class="amount">
                            {{ feeCost.currencySymbol }} {{ feeCost.skipPrepaid & form.skipPrepaid ? 0 :
                              afterDiscountAmount }}
                            <Icon type="ios-help-circle-outline" size="24" color="#333" />
                          </span>
                          <div slot="content">
                            <div class="title-text">
                              {{ $t("home.tax_text4") }}：{{ feeCost.currencySymbol }} {{ feeCost.logisticsFee }}
                            </div>
                            <div class="title-text">
                              {{ $t('submitParcel.tax_text9') }}：{{ feeCost.currencySymbol }} {{ cheapLogistics || 0 }}
                            </div>
                            <div class="fee-text">
                              {{ $t("home.tax_text3") }}：{{ feeCost.currencySymbol }} {{ feeCost.insuranceFee }}
                            </div>
                            <!-- 操作费用暂时隐藏 -->
                            <div class="fee-text">
                              {{ $t("home.tax_text5") }}：{{ feeCost.currencySymbol }} {{ feeCost.operateFee }}
                            </div>
                            <div class="fee-text">
                              {{ $t("home.tax_text6") }}：{{ feeCost.currencySymbol }} {{ feeCost.serviceFee }}
                            </div>
                            <div class="fee-text">
                              {{ $t("home.tax_text1") }}：{{ feeCost.currencySymbol }} {{ feeCost.clearanceFee }}
                            </div>
                            <!-- 燃油费用暂时隐藏 -->
                            <div class="fee-text">
                              {{ $t("pay.fuel_charge") }}：{{ feeCost.currencySymbol }} {{ feeCost.fuelFee || 0 }}
                            </div>
                            <div class="fee-text">
                              {{ $t("home.tax_text7") }}：{{ feeCost.currencySymbol }} {{ feeCost.storageFee }}
                            </div>
                            <div class="title-text">
                              {{ $t("pay.unpaid_total_price") }}：{{ feeCost.currencySymbol }} {{ afterDiscountAmount }}
                            </div>
                          </div>
                        </Tooltip>
                      </div>
                      <div class="coupon-text" v-if="cheapLogistics">{{ $t('submitParcel.alreadyDiscounted') }}{{
                        feeCost.currencySymbol }}{{ feeCost.skipPrepaid & form.skipPrepaid ? 0 : cheapLogistics }}</div>
                    </div>
                    <!-- 优惠券 -->
                    <div class="coupon-sty">
                      <div :class="verdict && !isPreview ? 'default-text' : 'disable-text'"
                        @click="verdict && !isPreview ? toggle() : ''">
                        <span v-if="isSel">{{ $t('personal.has_selected') }}</span>
                        <span v-else>{{ $t('personal.use_coupon') }}</span>
                        <Icon type="md-arrow-dropdown" />
                      </div>
                    </div>
                    <Button class="btn" type-size="oversized" :loading="loading" @click="onExpressOrderCreate">
                      {{ $t("submitParcel.submissionWaybill") }}
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 优惠券 -->
    <order-coupon-list ref="orderCouponRef" :couponDataList="couponDataList" couponType="EXPRESS"
      :userLanguage="userLanguage" :userInfo="userInfo" :userCurrency="userCurrency" @loadingFc="loadingFc"
      @amountAssignment="amountAssignment" @handleInfo="getCheapInfo" @uncheck="callOff"></order-coupon-list>
    <!-- 无可用物流路线弹框 -->
    <no-router-pop ref="noRouteRef"></no-router-pop>
    <tip-pop ref="tipRef" @giveUpChange="giveUpChange" @nextChange="nextChange"></tip-pop>
    <whether-buy-insure ref="whetherRef" @yesChange="yesChange" @noChange="noChange"></whether-buy-insure>
    <!-- 地址提示弹窗 -->
    <rules-pop-one ref="oneRef" @closeEmit="close" @confirmEmit="confirm"></rules-pop-one>
  </div>
</template>

<script>
import {
  expressLogisticsList,
  expressOrderCreate,
  expressOrderDetails,
  expressOrderService,
  calculate,
  logisticsRoutes,
} from "@/api/expressOrder";
import { addressExamineRepetition, validateAddressRequired } from "@/common/common";
import { myAvailableCouponList } from "@/api/order";
import UserShippingAddress from "@/views/main/submit-parcel/user-shipping-address";
import ProductPicture from "@/views/main/user/components/product-picture";
import { mapState } from "vuex";
import TNoData from "@/components/t-no-data";
import TLoading from "@/components/t-loading";
import insureCom from "./insureCom.vue";
import coupon from ".././pay/coupon.vue";
import logisticsItem from "./components/logistics-item.vue";
import { pointUser } from "@/common/point/api-hook";//打点日志
import OrderCouponList from '../pay/compontents/order-coupon-list.vue';
import tipPop from "./components/tip-pop";
import WhetherBuyInsure from './components/whether-buy-insure.vue';
import RulesPopOne from '../user/components/rules-pop-one.vue';
import NoRouterPop from './components/no-router-pop.vue';
import CountDown from '@/views/main/user/components/count-down';
export default {
  name: "index",
  components: {
    coupon,
    TLoading,
    TNoData,
    ProductPicture,
    UserShippingAddress,
    insureCom,
    logisticsItem,
    OrderCouponList,
    tipPop,
    WhetherBuyInsure,
    RulesPopOne,
    NoRouterPop,
    CountDown
  },
  data() {
    return {
      disabledGroup: '',
      isPreview: false,
      parcelDetailArr: [],
      parcelTypeArr: [],
      recipientRadio: 'recipient',
      upDown: false,
      verdict: false,
      cheapLogistics: '',//优惠金额
      afterDiscountAmount: '',//优惠后实付
      originalCost: '',
      logisticsFee: '',
      feeCost: {},
      routeLoading: false,
      countryName: "",
      appName: process.env.VUE_APP_NAME,
      checkboxValue: true,
      tabActive: 0,
      temporaryRoute: "", // 临时选择的路线
      currentRoute: "", // 当前选择路线
      value1: false,
      loading: false,
      orderInfo: {
        orderItemList: []
      },
      logisticsList: [], // 物流路线列表
      declareType: "blur",
      phone: "apple",
      logisticsListNum: [],
      form: {
        addressId: "", // 地址ID
        expressOrderNo: "", // 预创建物流运单返回的ID
        remarks: "", // 运单备注
        routeId: "", // 物流路线ID
        serviceItemIdList: "", // 包装服务项IDS
        insuranceId: [],
        couponCustomerId: '',
        skipPrepaid: false
      },
      minimalPack: '',
      taxRequired: '',
      showError: false,
      insure: '',
      insuranceInfoList: [],
      couponDataList: [],
      isSel: false,
      recordArr: [],
      showCount: false,
      addressInfo: {},
      dataInfo: {}
    };
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      userInfo: (state) => state.user.userInfo,
      userCurrency: (state) => state.user.userCurrency,
      taxAgreement: (state) => {
        // 税费提醒
        let obj = "";
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_TAX_WARNING;
        }
        return obj;
      },
      noticeAgreement: (state) => {
        // 物流提醒
        let obj = "";
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_DELIVERY_NOTICE;
        }
        return obj;
      },
    }),
  },
  watch: {
    // 保险禁用优惠券
    // 'form.insuranceId': function (newValue, oldValue) {
    //   this.verdict = Array.isArray(newValue) && newValue.length > 0;
    // },
    'form.serviceItemIdList': function (newValue, oldValue) {
      this.verdict = Array.isArray(newValue) && newValue.length > 0;
    },
  },
  created() {
    this.form.expressOrderNo = this.$route.query.id;
    this.getExpressOrderService();
    this.getCargoList();
    this.$store.dispatch("getUserInfo");
  },
  methods: {
    // 预演包裹
    changeSwitch(val) {
			console.log(val,'asd')
      this.isPreview = val;//预演包裹的话不能使用优惠券
      this.form.couponCustomerId = "";// 清空优惠券操作，防止用户先选了优惠券，再开启预演包裹
			if(val){
				this.callOff();
			}
    },
    onViewImage(image) {
      // 查看图片
      this.$Modal.info({
        width: 520,
        closable: true,
        render: (h) => {
          return h('img', {
            attrs: {
              src: image,
            },
            style: {
              display: 'block',
              width: '100%'
            }
          })
        }
      })
    },
    getCheapInfo(value) {
      this.isSel = true;
      this.cheapLogistics = value.discountAmount;//优惠金额
      this.afterDiscountAmount = value.afterDiscountAmount;//优惠后实付
      this.form.couponCustomerId = value.couponCustomerId;//优惠券id
    },
    callOff() {
			this.$nextTick(() => {
				this.isSel = false;
				this.cheapLogistics = '';//优惠金额
				this.afterDiscountAmount = this.feeCost.totalFee;//优惠后实付
				this.form.couponCustomerId = '';//优惠券id
			})
			this.$refs.orderCouponRef.cancelBtn();
    },
    loadingFc(val) {
      this.loadingAll = val;
      // 解决code500拦截无法取消loadingAll问题
      if (!this.time) {
        this.time = setTimeout(() => {
          this.time = null;
          this.loadingAll = false;
        }, 5000);
      }
    },
    amountAssignment(data) {
      this.couponCustomerId = data.couponCustomerId;
      this.loadingFc(false);
      this.form.couponCustomerId = data.couponCustomerId;
    },
    // 勾选打包方式
    selectPackType(currentVal) {
      // 将选中的打包方式id放进form.serviceItemIdList里
      this.parcelTypeArr.forEach(item => {
        if (item.name === currentVal) {
          // this.form.serviceItemIdList = [];
          this.form.serviceItemIdList.push(item.id)
        } else {
          // 如果名称不匹配，在this.form.serviceItemIdList数组中查找并删除对应的id
          const index = this.form.serviceItemIdList.indexOf(item.id);
          if (index !== -1) {
            this.form.serviceItemIdList.splice(index, 1);
          }
        }
      })
      this.trialOrError();//勾选触发运单试算
      // this.getExpressLogisticsList();//这里调用的话，保障（保险）服务会卡死循环极简包装禁用，这里不要调用了
    },
    selectPack() {
      this.trialOrError();//勾选触发运单试算
    },
    selectParcelDetail() {
      // 包裹详情的勾选事件必然要含有打包方式的id,将id存到this.form.serviceItemIdList去传值
      this.parcelDetailArr.forEach((item) => {
        if (item.active) {
          // 如果active为true且this.form.serviceItemIdList中没有该id
          if (!this.form.serviceItemIdList.includes(item.id)) {
            this.form.serviceItemIdList.push(item.id);
          }
        } else {
          // 如果active为false，在this.form.serviceItemIdList数组找到相同id删掉
          const index = this.form.serviceItemIdList.indexOf(item.id);
          if (index !== -1) {
            this.form.serviceItemIdList.splice(index, 1);
          }
        }
      });
      this.selectPack();
      // this.getExpressLogisticsList();//这里调用的话，保障（保险）服务会卡死循环极简包装禁用，这里不要调用了
    },
    // 运单试算
    trialOrError() {
      calculate(this.form).then((res) => {
        if (res.result.isCarriable) {
          this.recordArr = [...this.form.serviceItemIdList];
          this.feeCost = res.result;
          this.originalCost = this.feeCost.totalFee;
          this.logisticsFee = this.feeCost.logisticsFee;
          if (this.feeCost.totalFeeAfterDiscount && this.feeCost.couponFee > 0) {
            this.afterDiscountAmount = this.feeCost.totalFeeAfterDiscount;
            this.cheapLogistics = this.feeCost.couponFee;

          } else {
            this.afterDiscountAmount = this.feeCost.totalFee;
          }
        } else {
          this.$refs.tipRef.open();
        }
      })
    },
    nextChange() {
      this.$refs.tipRef.closeMet();//关闭弹窗
      this.getExpressLogisticsList();//刷新路线
    },
    giveUpChange() {
      this.$refs.tipRef.closeMet();//关闭弹窗
      // 恢复 this.form.serviceItemIdList 为 this.recordArr 的数据
      this.form.serviceItemIdList = [...this.recordArr];

      // 处理 this.parcelDetailArr 数组
      this.parcelDetailArr.forEach(item => {
        // 如果 item.id 在 this.recordArr 中，将 active 设置为 true，否则设置为 false
        item.active = this.recordArr.includes(item.id);
      });

      // 处理 this.parcelTypeArr 数组
      this.disabledGroup = '';
      this.parcelTypeArr.forEach(item => {
        if (this.recordArr.includes(item.id)) {
          // 如果 item.id 在 this.recordArr 中，说明该打包方式是选中的
          this.disabledGroup = item.name;
        }
      });
    },
    modifyRouter() {
      this.currentRoute = "";
      this.form.routeId = "";
      this.form.insuranceId = [];
      this.insuranceInfoList = [];
      this.minimalPack = '';
      this.taxRequired = '';
      this.insure = '';
    },
    //选择路线
    confirmRoute(item) {
      this.currentRoute = item;
      // 选择线路后税号是否必填
      this.taxRequired = item.taxRequired;
			this.form.insuranceId = [];
      this.minimalPack = item.minimalPack;
      // 这个判断是为了用户先选了极简包装，又更改了不支持极简包装的线路
      if (this.minimalPack == 'N') {
        // 先删除满足条件的元素
        let excludeIds = [];
        for (let i = 0; i < this.parcelTypeArr.length; i++) {
          if (this.parcelTypeArr[i].packageWeight === 'EXCLUDE') {
            let idToRemove = this.parcelTypeArr[i].id.toString();
            excludeIds.push(idToRemove);
          }
        }
        this.form.serviceItemIdList = this.form.serviceItemIdList.filter(id => !excludeIds.includes(id));

        // 再添加第一个 packageWeight 不等于 'EXCLUDE' 的元素
        let firstNonExcludeItem = this.parcelTypeArr.find(item => item.packageWeight !== 'EXCLUDE');
        if (firstNonExcludeItem) {
          this.disabledGroup = firstNonExcludeItem.name;
          this.form.serviceItemIdList.push(firstNonExcludeItem.id.toString()); // 将 id 转换为字符串后添加
        }
      }
			if(item.taxRequired != 'Y'){//选到税号非必填的 清空之前输入的税号
				this.form.taxNumber = ''
			}
      this.insure = item.insure;
      this.insuranceInfoList = item.insuranceInfoList;
      this.form.routeId = item.routeId;
      this.selectPack();
    },
		//取消选择路线
		delRoute(){
			//清空路线id
			this.form.routeId = '';
			//清空购买保障id
			this.form.insuranceId = [];
			//清空税号
			this.form.taxNumber = '';
			//清空选择路线的数据
			this.currentRoute = '';
			//重置预包装开关
			this.form.skipPrepaid = false;
			this.cheapLogistics = '';//优惠金额
			this.feeCost = {};
			this.afterDiscountAmount = '';
		},
    getExpressLogisticsList() {
      this.routeLoading = true;
      expressLogisticsList(
        this.form.expressOrderNo,
        this.form.addressId,
        this.userCurrency.code,
        this.form.serviceItemIdList
      )
        .then((res) => {
          //- 尺寸限制改在前端判断 Ts
          this.orderInfo.orderItemList.forEach((orderItem) => { //- 遍历商品
            res.result.forEach((item) => { //- 遍历线路
              if (item.isCarriable && item.sizeLimitExp != null && item.sizeLimitExp != "") {
                let L = orderItem.length * 1, W = orderItem.width * 1, H = orderItem.height * 1;
                let [L1, L2, L3] = [L, W, H].sort().reverse();
                item.isCarriable = eval(item.sizeLimitExp);
                if (!item.isCarriable) {
                  item.rejectReason = 'The package exceeds the size limit on this route.';
                }
                // console.log("L:"+L+" W:"+W+" H:"+H);
                // console.log(item.sizeLimitExp);
              }
            })
          });
          //--
          let tmplogisticsListSort = (res.result || []).sort((a, b) => {
            const indexA = res.result.findIndex(item => item === a);
            const indexB = res.result.findIndex(item => item === b);
            // 先判断recmd属性，将recmd为'Y'的排在前面，且保持原顺序（先进先出）
            if (a.recmd === 'Y' && b.recmd === 'Y') {
              return indexA - indexB;
            } else if (a.recmd !== 'Y' && b.recmd === 'Y') {
              return 1;
            }
            // 如果recmd属性相同，再按照之前的规则进行比较
            if (a.isCarriable !== b.isCarriable) {
              return a.isCarriable ? -1 : 1
            }
            return a.estTotalExpressCost - b.estTotalExpressCost;
          });
          this.logisticsList = tmplogisticsListSort;
          this.logisticsListNum = this.logisticsList.filter((item) => item.isCarriable);
          let currentRoute = this.logisticsList.find((item) => item.isCarriable);
          if (tmplogisticsListSort && tmplogisticsListSort.length && typeof currentRoute != "undefined") {
            // this.currentRoute = currentRoute;
            // this.form.routeId = this.currentRoute.routeId;//默认选择一条路线
            // this.minimalPack = this.currentRoute.minimalPack;//默认第一条路线是否支持极简包装
            // this.taxRequired = this.currentRoute.taxRequired;//默认第一条路线税号是否必填
            // this.insure = this.currentRoute.insure;//默认第一条路线是否支持购买保险
            // this.insuranceInfoList = this.currentRoute.insuranceInfoList;//默认第一条路线的保障服务
            // this.trialOrError();//试算
            // this.temporaryRoute = this.currentRoute;
          } else {
            this.$refs.noRouteRef.open();//无可用物流路线弹框
          }
          // 更换地址后如果没有可用路线就显示弹框
          if (this.logisticsList.length == 0) {
            this.$refs.noRouteRef.open();//无可用物流路线弹框
          }
          this.routeLoading = false;
					this.delRoute();
        })
        .catch(() => {
          this.routeLoading = false;
        });
    },
    onSelectAddr(info) {
      this.addressInfo = info;
      // 选择的地址
      this.countryName = info.countryText;
      this.form.addressId = info.id;
      this.modifyRouter();
      this.getExpressLogisticsList();
    },
    insureSel(e) {
      this.form.insuranceId = e;
      this.selectPack();
    },
    onExpressOrderCreate() {
      console.log(this.form);

      // 创建物流运单
      if (this.form.routeId == "") {
        this.$Message.error(this.$t("user.selectLogistics"));
        return false;
      }
      if (this.checkboxValue != true) {
        this.$Message.error(this.$t("public.risk"));
        return false;
      }
      // 如果税号为必填，判断税号没填的话提示
      if (this.taxRequired == 'Y') {
        if (!this.form.taxNumber || this.form.taxNumber == '') {
          this.showError = true;
          this.$Message.error(this.$t("submitParcel.tax_num_tip"));
          return;
        }
      }

      if (this.insure == 'Y' && (this.form.insuranceId.length == 0 || !this.form.insuranceId) && !this.showCount) {
        this.showCount = true;
        this.$refs.whetherRef.open();
        return
      }

      this.createParcel();
    },
    createParcel() {
      // 地址必填校验
      if (!validateAddressRequired(this.addressInfo)) {
        this.$refs.oneRef.open(this.$t('user.no_data_pop_text'), this.$t('user.close'), this.$t('submitParcel.edit'), 2);
        return;
      }

      addressExamineRepetition(this.addressInfo, true, 'parcel').then(() => {
        this.createMet();
      }).catch((err) => {
        let str = '';
        if (err.val) {
          str = this.$t(err.text, { val: err.val });
        } else {
          str = this.$t(err.text);
        }
        this.$refs.oneRef.open(str, this.$t('user.submitParcel'), this.$t('user.edit'));
      })
    },
    createMet() {
      // 包装服务（包含打包方式和包装详情）
      this.parcelDetailArr.forEach(item => {
        if (item.active) {
          this.form.serviceItemIdList.push(item.id)
        }
      })
      // 去重操作
      this.form.serviceItemIdList = [...new Set(this.form.serviceItemIdList)];

      this.loading = true;
      expressOrderCreate(this.form).then((res) => {
        pointUser('actions', '2012');
        this.loading = false;
        this.$Message.success(this.$t("submitParcel.submitSuccessfully"));
        if (this.form.skipPrepaid) {
          this.$router.push({
            path: "/result?orderNo=" + res.result,
          })
        } else {
          this.$router.push(`/pay?id=${this.form.expressOrderNo}&&cheapLogistics=${this.cheapLogistics}&&markText=parcelAffirm`);
        }
        this.form.serviceItemIdList = [];
      }).catch(() => {
        this.loading = false;
      });
    },
    getExpressOrderService() {
      // 仓储服务类目查询
      expressOrderService().then((res) => {
        let data = res.result;
        // 将数据拆分为打包方式和包装详情的两个单独数组存放
        data.forEach(item => {
          if (item.type === 'external_packaging') {
            this.parcelTypeArr.push(item)
          } else if (item.type === 'packaging_details') {
            item.active = false; // 包装详情默认都不选中
            this.parcelDetailArr.push(item)
          }
        })
        // 打包方式默认选中纸箱包装
        this.parcelTypeArr.forEach(i => {
          if (i.id === '1735480875309699073') {
            this.disabledGroup = i.name;
            this.form.serviceItemIdList = [];
            this.recordArr.push(i.id);//记录数组，用于记录退回上一步操作
            this.form.serviceItemIdList.push(i.id);//默认传值
          }
        })
      });
    },
    getCargoList() {
      expressOrderDetails(this.form.expressOrderNo).then((res) => {
        this.dataInfo = res;
        let data = res.result;
        if (res.result.orderAddress) {
          data.orderAddress.name =
            res.result.orderAddress.recipientName.split(",")[0];
          data.orderAddress.surname =
            res.result.orderAddress.recipientName.split(",")[1];
          this.countryName = res.result.orderAddress.countryText;
          this.form.addressId = res.result.orderAddress.addressId;
          this.addressInfo = res.result.orderAddress;
          this.getExpressLogisticsList();
        }
        this.orderInfo = res.result;

        // 默认id
        // this.form.addressId = res.result.orderAddress.id;
      });
    },
    switchOpenMet(val) {
      if (val) {
        this.insuranceInfoList.forEach(item => {
          this.form.insuranceId.push(item.insuranceId);
        })
        this.selectPack();
      } else {
        this.form.insuranceId = [];
        this.selectPack();
      }
    },
    toggle() {
      this.$refs.orderCouponRef.loading = true;
      myAvailableCouponList({ orderNo: this.$route.query.id, currencyCode: this.userCurrency.code, orderType: 'EXPRESS', amount: this.originalCost, baseAmount: this.logisticsFee }).then((res) => {
        this.couponDataList = (res.result || []).filter(item => {
          return item.status != 'EXPIRED';
        });
        this.$refs.orderCouponRef.loading = false;
        this.$refs.orderCouponRef.open();
      }).catch((err) => {
        console.log(err);
      })
    },
    yesChange() {
      this.$refs.insureRef[0].changeSwitch(true);
      this.$refs.whetherRef.closeMet();
      this.$refs.insureRef[0].buyProtection = true;
    },
    noChange() {
      this.showCount = true;
      this.$refs.whetherRef.closeMet();
      setTimeout(() => {
        this.createParcel();
      }, 1000)
    },
    // 关闭 其他无操作，仅关闭
    close(e, v) {
      if (e == 1) {
        this.createMet();
      }
    },
    confirm() {
      this.$refs.userShipRef.editAddress(this.addressInfo);
    }
  },
};
</script>

<style scoped lang="less">
.main {
  .content {
    background: #FFFFFF;

    .page {
      position: relative;
      // width: 100%;
      // margin: 32px auto;
      // padding-bottom: 80px;
      // background:#fff !important;
      padding-top: 24px;

      .page-content {
        width: 100%;
        background: #fff;
        padding: 32px;

        .content-auto {
          width: 1600px;
          margin: auto;

          .cancel-area-time {
						width:100%;
            padding: 0 32px;
            background: #FFEEF4;
            border-radius: 8px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #FF186B;
            line-height: 19px;
            margin-top: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
						height:54px;
						.area-time-icon{
							width: 32px;
							height: 32px;
						}
          }

          .tip-area {
            padding: 16px;
            background: #FFEEF4;
            border-radius: 6px 6px 6px 6px;
            margin-top: 32px;
            font-weight: 600;
            font-size: 18px;
            color: #FF186B;
            line-height: 21px;

            .text {
              font-size: 16px;
              font-weight: 500;
              line-height: 21px;
              word-break: break-all;
            }
          }
        }

        .parcel-content {
          .parcel-route {
            padding: 32px 0;
            border-bottom: 1px solid #E9EAF3;
          }

          .parcel-op {
            opacity: .6;
          }

          .no-route {
            display: block;
            padding: 12px;
            text-align: center;
            color: @primary-color;
            font-size: 14px;
          }

          .logistics-disclaimer {
            background: #FFEEF4;
            border-radius: 8px;
            border: 1px solid #FF5391;
            box-sizing: border-box;
            padding: 24px;
            margin-top: 24px;
            font-weight: 500;
            color: #767B93;
            font-size: 16px;
            line-height: 28px;
            text-align: justify;
          }

          .preview-parcel {
            margin-top: 32px;

            &-head {
              display: flex;
              align-items: center;
              margin-bottom: 24px;

              .head-label {
                font-family: Open Sans, Open Sans;
                font-weight: 600;
                font-size: 24px;
                color: #333333;
                line-height: 28px;
              }
            }

            &-desc {
              padding: 24px;
              background: #F7F9FC;
              border-radius: 8px 8px 8px 8px;
              border: 1px solid #D4D9EF;

              .desc-text {
                font-family: Open Sans, Open Sans;
                font-weight: 400;
                font-size: 18px;
                color: #333333;
                line-height: 27px;
              }

              .des-text {
                font-family: Open Sans, Open Sans;
                font-weight: 400;
                font-size: 18px;
                color: #FF186B;
                line-height: 27px;
              }
            }
          }

          .parcel-duty {
            margin-top: 16px;

            .duty-input {
              &:deep(.ivu-input) {
                height: 56px;
                border: 1px solid #D4D9EF;
                border-radius: 8px;
                background: #F7F9FC;
                width: 400px;
                font-size: 18px;
              }
            }

            .err-bor {
              &:deep(.ivu-input) {
                height: 56px;
                border: 1px solid red;
                border-radius: 8px;
                background: #F7F9FC;
                width: 400px;
                font-size: 18px;
              }
            }
          }

          .err-text-tip {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
            line-height: 20px;
            margin-top: 16px;
          }

          .payment-sub {
            color: #767B93;
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            margin-top: 16px;
          }

          .parcel-radio {
            margin-top: 20px;

            .radio-item {
              .item-span {
                color: #FF186B;
                font-size: 20px;
              }
            }
          }

          .product-title {
            font-weight: bold;
            font-size: 24px;

            .col-p {
              color: #FF186B;
            }
          }
					.routes-lists{
						width:100%;
						border: 1px solid #E2E2E2;
						.routes-other{
							padding:30px 16px 30px 106px;
							/deep/ .ivu-timeline-item-head-blue{
							  background: #D8D8D8;
							  border: none;
								left:1px;
							}
							/deep/ .ivu-timeline-item-head{
								width: 8px;
								height:8px;
							}
							/deep/ .ivu-timeline-item-content{
								padding: 0 0 0 64px;
							}
							/deep/ .ivu-timeline-item{
								padding:0;
							}
							.parcel-duty{
								width: 390px;
								height:38px;
								.duty-input {
								  &:deep(.ivu-input) {
								    height: 38px;
								    border: 1px solid #D4D9EF;
								    border-radius: 2px;
								    background: #fff;
								    width: 390px;
								    font-size: 14px;
								  }
								}
								.err-bor {
								  &:deep(.ivu-input) {
								    height: 38px;
								    border: 1px solid red;
								    border-radius: 2px;
								    background: #fff;
								    width: 390px;
								    font-size: 14px;
								  }
								}
							}
							.mr-150{
								margin-right: 150px;
							}
						}
						.routes-head{
							height: 38px;
						}
						.routes-check{
							width: 5%;
						}
						.routes-msg{
							width: 30%;
						}
						.routes-insure{
							width: 15%;
						}
						.routes-price{
							width: 15%;
						}
						.routes-day{
							width: 15%;
						}
						.routes-remark{
							width: 20%;
						}
					}
					.empty-route{
						width:100%;
						height:360px;
						.empty-icons{
							width:120px;
							height:120px;
							display: block;
							margin: auto;
						}
					}
          .mt-32 {
            margin-top: 32px;

            span {
              color: #FF186B;
            }
          }

          .pack-type {
            margin-top: 32px;
            display: flex;
            padding-bottom: 24px;
            border-bottom: 1px solid #E9EAF3;

            .type-left {
              font-size: 24px;
              color: #333;
              font-weight: bold;

              .left-red {
                color: #FF186B;
              }
            }

            .type-right {
              display: flex;
              flex-wrap: wrap;
              margin-left: 24px;
              flex: 1;

              .right-item {
                margin-right: 28px;
                margin-bottom: 24px;
                display: flex;
                align-items: center;

                .item-free {
                  border: 1px solid #FF186B;
                  color: #FF186B;
                  background: #FFEEF4;
                }

                .item-tip {
                  font-size: 20px;
                  color: #333;
                  margin-left: 12px;

                  .tip-icon {
                    font-size: 20px;
                  }
                }

                .item-charge {
                  border: 1px solid #73D873;
                  color: #73D873;
                  background: #EFFDF0;
                }

                .item-label {
                  height: 35px;
                  box-sizing: border-box;
                  display: flex;
                  align-items: center;
                  padding: 0 6px;
                  border-radius: 4px;
                  font-size: 14px;
                  font-weight: bold;
                  margin-left: 12px;
                }
              }

              :deep(.ivu-radio-group) {
                display: flex;
                align-items: center;
                gap: 32px;

                .ivu-radio-wrapper {
                  display: flex;
                  align-items: center;

                  .item-tip {
                    font-size: 20px;
                    color: #333;

                    .tip-icon {
                      font-size: 20px;
                    }
                  }

                  .item-free {
                    border: 1px solid #FF186B;
                    color: #FF186B;
                    background: #FFEEF4;
                  }

                  .item-label {
                    height: 35px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    padding: 0 6px;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: bold;
                    margin-left: 12px;
                  }

                  .item-charge {
                    border: 1px solid #73D873;
                    color: #73D873;
                    background: #EFFDF0;
                  }
                }
              }
            }
          }

          .parcel-remarks {
            padding-top: 15px;
            border-radius: 8px;
            background-color: #FFEEF4;

            .card-tip-text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #FF186B;
              line-height: 19px;
              margin-left: 15px;
              margin-right: 15px;
              margin-bottom: 15px;
            }

            .remarks-textarea {
              &:deep(.ivu-input) {
                background: #F7F9FC !important;
                border-radius: 8px;
                border: none;
                padding: 16px;
                font-weight: 500;
                font-size: 16px;
                color: #AEB0B9;
                line-height: 19px;
              }
            }
          }

          .product-list {
            margin-top: 32px;
            border-radius: 12px;
            border: 2px solid #E9EAF3;

            .list-up {
              height: 82px;
              width: 140px;
              margin: auto;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;

              .up-icon {
                height: 24px;
                width: 24px;
                margin-left: 8px;
              }

              .up-text {
                color: #AEB0B9;
                font-size: 24px;
                line-height: 24px;
              }
            }

            .list-th {
              height: 78px;
              background: #F7F9FC;

              .th-row,
              .th-col {
                height: 100%;
              }

              .th-name {
                color: #929292;
                font-size: 18px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .list-td {
              padding-top: 32px;

              .td-row,
              .td-col {
                height: 168px;
              }

              .td-line {
                width: calc(100% - 80px);
                height: 1px;
                background: #E9EAF3;
                margin: auto;
              }

              .td-img {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 168px;

                .img-img,
                .img-main {
                  width: 168px;
                  height: 168px;
                  border-radius: 12px;
                  cursor: pointer;
                }
              }

              .td-name {
                margin: auto;
                font-size: 18px;
                line-height: 25px;

                .name-title {
                  color: #222;
                  font-weight: bold;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }

                .name-sku {
                  margin-top: 12px;
                  color: #74767F;

                  .sku-span {
                    margin-right: 3px;
                  }
                }
              }

              .td-num {
                height: 168px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                color: #1E1714;
              }

              .td-center {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 168px;
              }

              .td-type {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 28px;
                border-radius: 4px;
                background: #FFEEF4;
                box-sizing: border-box;
                padding: 0 8px;

                .type-name {
                  margin-right: 4px;
                }

                .type-icon {
                  color: #FF186B;
                  font-size: 14px;
                  line-height: 14px;
                }
              }

              .td-qc {
                height: 90px;
                background: #F7F9FC;
                border-radius: 8px;
                margin-right: 40px;
                display: flex;
                align-items: center;
                margin-bottom: 32px;

                .qc-title {
                  color: #333;
                  font-size: 18px;
                  min-width: 120px;
                  padding-left: 14px;
                  box-sizing: border-box;
                }

                .qc-list {
                  margin-right: 14px;
                  width: 54px;
                  height: 54px;

                  .list-img {
                    width: 54px;
                    height: 54px;
                    border-radius: 8px;
                  }
                }
              }
            }
          }
        }
      }

      .parcel-head {
        width: 100%;
      }


      .shipping-address {
        margin-top: 40px;

        .shipping-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-weight: 500;

          .label {
            color: @t-title-color;
          }

          .left {
            display: flex;
            align-items: center;

            .fun-text {
              display: block;
              margin-left: 24px;
              color: @primary-color;
            }
          }
        }

        .current-address {
          position: relative;
          margin-top: 16px;

          .bg-border {
            display: block;
            width: 100%;
          }

          .address-info {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 40px;
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;
              flex-flow: column;
              justify-content: space-between;
              height: 100%;

              .receiver {
                color: @t-title-color;

                .name {
                  font-size: 24px;
                  font-weight: 700;
                }

                .contact {
                  margin-left: 24px;
                  font-size: 14px;
                  font-weight: 500;
                }
              }

              .addr {
                color: @t-text-color;

                span {
                  display: block;
                  margin-top: 6px;
                }
              }
            }

            .right {
              display: flex;
              flex-flow: column;
              justify-content: space-between;
              height: 100%;

              .select-addr {
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;

                .default-addr {
                  padding: 2px 12px;
                  color: @primary-color;
                  background: #f0f9ff;
                  border-radius: 2px;
                }

                .addr-value {
                  padding: 2px 12px;
                  margin-left: 8px;
                  color: @success-color;
                  background: #e6f3ec;
                  border-radius: 2px;
                }
              }

              .edit-wrap {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .edit {
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  img {
                    display: block;
                    width: 16px;
                    flex: 0 0 16px;
                    height: 16px;
                  }

                  span {
                    margin-left: 4px;
                    color: @primary-color;
                    font-size: 14px;
                    font-weight: 500;
                  }
                }
              }
            }
          }
        }
      }

      .commodity-list {
        border-bottom: 1px solid @t-table-border-color;
        padding-bottom: 40px;

        .table-wrap {
          margin-top: 32px;

          .table {
            &-header {
              padding: 12px;
              background: @t-table-header-bg;

              .th {
                padding-left: 16px;
                color: @t-title-color;
                font-size: 14px;
                font-weight: 600;

                .all {
                  cursor: pointer;
                }
              }
            }

            &-content {
              border-top: 1px solid @t-table-border-color;

              .table-tr {
                padding: 13px;
                border-bottom: 1px solid @t-table-border-color;

                &:hover {
                  background: rgba(235, 247, 255, 0.4);
                }

                .table-top {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .left {
                    display: flex;
                    align-items: center;
                    color: @t-label-color;
                    font-size: 14px;

                    .date {
                      margin: 0 12px;
                    }
                  }

                  .delete {
                    cursor: pointer;
                    color: @primary-color;
                    font-size: 14px;
                  }

                  .box {
                    display: flex;
                    align-items: center;

                    .icon {
                      display: block;
                      width: 16px;
                      margin-left: 12px;
                    }

                    .text {
                      margin-left: 4px;
                      color: @t-label-color;
                      font-size: 14px;
                    }
                  }
                }

                .table-body {
                  margin-top: 16px;
                  color: @t-text-color;
                  font-size: 14px;

                  .td {
                    padding-left: 16px;

                    .btn {
                      cursor: pointer;
                      color: @primary-color;
                      font-size: 14px;
                    }
                  }

                  .order-info {
                    &:hover {
                      cursor: pointer;
                      color: @primary-color;
                    }
                  }

                  .td-commodity {
                    padding-left: 0;

                    .tag {
                      display: block;
                      margin-left: 116px;
                      font-size: 14px;
                      font-weight: 500;
                      color: @t-title-color;

                      .iconfont {
                        font-size: 14px;
                        color: @t-title-color;
                      }
                    }

                    .remark {
                      display: block;
                      cursor: pointer;
                      margin-left: 116px;
                      font-size: 14px;
                    }
                  }

                  .type-list {
                    display: block;

                    .type-item {
                      display: inline-block;
                      padding: 4px;
                      margin-top: 4px;
                      color: @t-text-color;
                      font-size: 12px;
                      background: #f5f5f5;
                      border-radius: 2px 2px 2px 2px;
                      opacity: 1;

                      &:first-child {
                        margin-top: 0;
                      }
                    }
                  }

                  .edit {
                    cursor: pointer;
                  }

                  .commodity-info {
                    display: flex;
                    align-items: center;

                    .info {
                      display: flex;

                      .commodity-left {
                        .image {
                          display: block;
                          width: 80px;
                          height: 80px;
                          border-radius: 4px 4px 4px 4px;
                        }
                      }

                      .commodity-content {
                        font-size: 14px;
                        margin-left: 12px;

                        .title {
                          color: @t-title-color;
                          font-weight: 500;
                        }

                        .intro {
                          margin-top: 4px;
                          margin-bottom: 8px;
                          color: @t-text-color;
                          white-space: pre-line;
                          /*允许换行*/
                          overflow: hidden;
                          text-overflow: ellipsis;
                          /*省略号*/
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          /*行向垂直排列*/
                          -webkit-line-clamp: 2; //*限制2
                        }
                      }
                    }
                  }

                  .operating-fun {
                    display: flex;

                    .tooltip {
                      cursor: pointer;
                      margin-left: 12px;
                    }
                  }
                }
              }
            }
          }
        }

        .select-package {
          .package-type {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-top: 40px;

            .in-wrapper {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-top: 32px;

              .in-tit {
                color: #222222;
                font-size: 14px;
                font-weight: bold;
              }

              .in-tip {
                border-radius: 2px;
                background: #FEF3F8;
                color: #FF186B;
                font-size: 12px;
                padding: 4px;
              }
            }

            .left {
              margin-right: 16px;
              color: @t-title-color;
              font-size: 14px;
              font-weight: 500;
            }

            .list {
              flex: 1;

              .radio {
                margin-right: 26px;
                margin-bottom: 6px;
              }

              .tooltip-value-wrap {
                display: inline-block;

                .tooltip-value {
                  display: flex;
                  align-items: center;
                  color: @t-text-color;
                  font-size: 14px;

                  .iconfont {
                    font-size: 14px;
                  }

                  .free {
                    padding: 2px 4px;
                    margin-left: 4px;
                    background: #e6f3ec;
                    border-radius: 2px;
                    font-size: 12px;
                    font-weight: 400;
                    color: @success-color;
                  }

                  .charge {
                    padding: 2px 4px;
                    margin-left: 4px;
                    background: #f0f9ff;
                    border-radius: 2px;
                    font-size: 12px;
                    font-weight: 400;
                    color: @primary-color;
                  }
                }

                .active-value {
                  color: @primary-color;
                }
              }
            }
          }
        }
      }

      .remark {
        display: flex;
        margin-top: 40px;

        .label {
          display: block;
          margin-right: 124px;
          color: @t-title-color;
          font-size: 14px;
          font-weight: 500;
        }

        .textarea {
          flex: 1;

          &:deep(.ivu-input) {
            background: #f5f5f5;
            border-radius: 2px 2px 2px 2px;
          }
        }
      }

      .mailing-title {
        display: block;
        margin-top: 40px;
        margin-bottom: 15px;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }

      .mailing-router {
        padding: 0px 12px;
        border: 1px solid #e5e6e9;

        .select-info {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          border-bottom: 1px solid @t-div-line-color;
          padding: 30px 0;

          .from-address {
            color: @t-text-color;
            font-size: 14px;
          }

          .to-address {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin: 0 16px;
            padding: 0 8px;
            width: 200px;
            height: 36px;
            border-radius: 2px;
            opacity: 1;
            /* 辅助线 */
            background: #ececec;
            /* 中性色/Border */
            border: 1px solid #dcdee2;
            color: @t-text-color;
            font-size: 14px;
          }

          .router-list {
            position: relative;
            display: flex;
            align-items: center;
            background: rgba(255, 142, 0, 0.1);
            border: 1px solid @primary-color;
            width: 200px;
            height: 36px;
            padding: 0 12px;
            border-radius: 2px;
            color: @primary-color;
            font-size: 14px;

            .triangle {
              position: absolute;
              width: 0;
              height: 0;
              right: 12px;
              top: 50%;
              margin-top: -3px;
              border: 6px solid red;
              border-color: @primary-color transparent transparent transparent;
            }
          }
        }

        .select-mailing-router {
          border-radius: 2px 2px 2px 2px;
          padding: 24px;

          .mailing-router-info {
            display: flex;
            align-items: center;

            .info-left {
              img {
                display: block;
                width: 96px;
                border-radius: 4px;
              }

              span {
                display: block;
                margin-top: 12px;
                color: @t-title-color;
                font-size: 14px;
              }
            }
          }

          .commission {
            .text {
              color: @t-text-color;
              font-size: 14px;
            }

            .price {
              display: block;
              color: @t-title-color;
              font-size: 20px;
              font-weight: 700;
            }

            .tooltip-value-wrap {
              cursor: pointer;
              color: @t-title-color;
            }

            .detail {
              display: block;
              margin-top: 6px;
              color: @primary-color;
              font-size: 14px;
            }
          }

          .logistic-cost {
            .tips-text {
              color: red;
              margin-top: 12px;
            }

            .text {
              display: block;
              color: @t-special-color;
              font-size: 12px;
            }

            .amount {
              display: flex;
              align-items: baseline;

              .value {
                margin-right: 4px;
                color: @t-title-color;
                font-weight: 700;
                font-size: 20px;
              }

              .icon-cursor {
                cursor: pointer;
                color: @t-text-color;
                font-size: 12px;
              }

              .volume-info {
                color: @t-text-color;
                font-size: 12px;

                .text {
                  color: #ffffff;

                  .hint {
                    display: block;
                    font-size: 12px;
                  }
                }
              }
            }

            .info {
              color: @t-text-color;
              font-size: 12px;

              .icon-cursor {
                cursor: pointer;
                color: @t-text-color;
                font-size: 14px;
              }

              .text {
                color: #ffffff;
              }
            }
          }

          .cycle {
            .text {
              display: block;
              color: @t-special-color;
              font-size: 12px;
            }

            .day {
              display: block;
              color: @t-title-color;
              font-weight: 700;
              font-size: 20px;
            }

            .view-date {
              color: @primary-color;
              font-size: 14px;
            }

            .schedule-wrap {
              display: flex;
              align-items: center;

              .schedule {
                width: 100%;
                background: #51b481;
                border-radius: 80px;
                height: 6px;
                overflow: hidden;

                .achieved {
                  width: 50%;
                  height: 100%;
                  background: #51b481;
                }
              }

              span {
                margin-left: 2px;
                color: @t-title-color;
                font-size: 14px;
              }
            }
          }

          .hint {
            color: @t-title-color;
            font-size: 14px;
          }

          .select-btn {
            width: 90%;
            border-radius: 2px;
            opacity: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 8px 0px;
            background: @t-title-color;
            cursor: pointer;
            color: #ffffff;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
          }
        }

        .shipping-router-list-wrap {
          .shipping-router-list {
            display: flex;
            width: 100%;
            border-bottom: 1px solid @t-div-line-color;
            overflow: auto;
            padding-bottom: 26px;
            .scrollbarStyle();

            .router-item {
              flex: 0 0 12%;
              box-sizing: border-box;
              width: 12%;
              min-height: 164px;
              border: 1px solid rgba(0, 0, 0, 0);
              border-radius: 4px;
              padding: 15px;
              cursor: pointer;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              transition: all ease 0.2s;
              margin-right: 12px;

              &:hover {
                border-color: @primary-color;
                background: rgba(255, 142, 0, 0.1);
              }

              .image {
                display: block;
                width: 50%;
                margin: 0 auto;
              }

              .name {
                display: block;
                margin-top: 8px;
                margin-bottom: 8px;
                color: @t-title-color;
                text-align: center;
                font-size: 14px;
              }

              .price-info {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 3px;
                color: @primary-color;
                font-size: 16px;
                font-weight: 500;

                .unit {
                  margin-right: 6px;
                }

                .amount {}
              }

              .day {
                display: block;
                text-align: center;
                color: @t-special-color;
                font-size: 14px;
              }

              .schedule-wrap {
                display: flex;
                align-items: center;
                margin-top: 5px;

                .schedule {
                  width: 100%;
                  background: @t-div-line-color;
                  border-radius: 80px;
                  height: 6px;
                  overflow: hidden;

                  .achieved {
                    width: 50%;
                    height: 100%;
                    background: @primary-color;
                  }
                }

                span {
                  margin-left: 5px;
                  color: @t-special-color;
                  font-size: 14px;
                }
              }
            }

            .router-active {
              border-color: @primary-color;
              background: rgba(255, 142, 0, 0.1);
            }

            .filter {
              filter: grayscale(100%);
            }
          }

          .no-route {
            display: block;
            padding: 12px;
            text-align: center;
            color: @primary-color;
            font-size: 14px;
          }

          .shipping-router-footer {
            display: flex;
            justify-content: flex-end;
            padding: 12px 0;

            .btn-confirm {
              width: 104px;
              height: 52px;
              border-radius: 2px;
              opacity: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background: @t-title-color;
              cursor: pointer;
              color: #ffffff;
              font-size: 14px;
              font-weight: 500;
            }
          }
        }
      }

      .select-way {
        margin-top: 32px;

        .label {
          color: @t-title-color;
          font-size: 14px;
          font-weight: 500;
        }

        .content {
          margin-top: 8px;

          .input-wrap {
            display: flex;
            align-items: center;

            .input {
              width: 265px;
            }

            .autonomously-input {
              width: 160px;
            }

            .btn {
              height: 44px;
              margin-left: 4px;
            }

            .text {
              cursor: pointer;
              margin-left: 14px;
              color: @t-text-color;
              font-size: 14px;
            }
          }

          .radio {
            margin-right: 48px;
          }

          .radio-text {
            color: @t-text-color;
            font-size: 14px;
          }

          .radio-active {
            color: @primary-color;
          }

          .hint {
            color: @t-text-color;
            font-size: 14px;
          }
        }
      }

      .alert {
        margin-top: 40px;
        margin-bottom: 32px;
        background: #f0f9ff;
        padding: 24px;
        border-radius: 4px;

        .title {
          color: @primary-color;
          font-size: 20px;
          font-weight: 500;

          .icon {}

          span {
            margin-left: 8px;
            color: @primary-color;
            font-size: 20px;
            font-weight: 500;
          }
        }

        .content {
          margin-top: 4px;
          color: @t-title-color;
          font-size: 14px;
          line-height: 24px;
        }
      }

      .all-select-footer {
        position: sticky;
        bottom: 0;
        padding: 24px 16px;
        background: #ffffff;
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #ececec;
        z-index: 99;

        .footer-content {
          width: 1600px;
          margin: auto;
        }

        .footer-head {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .weight-text {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 21px;
            color: #999999;
            line-height: 25px;

            .weight-tip {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 19px;
              color: #FFFFFF;
              line-height: 22px;
              white-space: normal;
            }
          }

          .top {
            margin-bottom: 20px;

            .left {
              display: flex;
              align-items: center;

              .select {
                .text {
                  color: @t-text-color;
                  font-size: 14px;
                }
              }

              .right {
                display: flex;

                .tag {
                  margin-left: 24px;
                  cursor: pointer;
                  color: @primary-color;
                  font-size: 14px;

                  &:first-child {
                    margin-left: 8px;
                  }
                }
              }
            }
          }

          .info {

            .left {
              .weight {
                color: #999999;
                font-size: 16px;

                .weight-text {
                  margin-left: 6px;
                  font-size: 18px;
                  font-weight: 900;
                }
              }

              .weight-bold {
                color: @t-title-color;
              }
            }

            .right {
              display: flex;
              justify-content: end;
              align-items: center;

              .price {
                .num {
                  margin-right: 6px;
                  color: @primary-color;
                  font-size: 24px;
                  font-weight: 600;
                }

                .iconfont {
                  cursor: pointer;
                }

                .poptip-content {
                  width: 250px;
                }

                .poptip-item {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: 12px;
                  color: @t-text-color;

                  &:first-child {
                    margin-top: 0;
                  }
                }
              }

              .pay-amount {
                margin-right: 24px;

                .actual-payable {
                  text-align: right;
                  margin-top: 4px;

                  &:first-child {
                    margin-top: 0;
                  }

                  .label {
                    color: #999999;
                    font-size: 14px;
                  }

                  .pay-label {
                    font-size: 16px;
                  }

                  .fee-text {
                    text-align: left;
                    color: #ececec;
                    font-size: 12px;
                    // text-decoration: line-through;
                  }

                  .title-text {
                    text-align: left;
                    color: #ececec;
                    font-size: 12px;
                  }

                  .amount {
                    color: @primary-color;
                    font-size: 18px;
                    font-weight: 900;
                  }

                  .text {
                    margin-left: 24px;
                    color: @t-title-color;
                    font-size: 14px;
                  }
                }

                .coupon-text {
                  text-align: right;
                  font-size: 12px;
                  color: #FF186B;
                }
              }

              .coupon-sty {
                .default-text {
                  min-width: 147px;
                  height: 52px;
                  padding: 0 16px;
                  border-radius: 11px;
                  border: 1px solid #FF186B;
                  cursor: pointer;
                  font-size: 19px;
                  color: #FF186B;
                  font-weight: 400;
                  line-height: 52px;
                  margin-right: 14px;
                }

                .disable-text {
                  min-width: 147px;
                  height: 52px;
                  padding: 0 16px;
                  border-radius: 11px;
                  background: #F6F6F6;
                  border: 1px solid #D6D6D6;
                  cursor: not-allowed;
                  font-size: 19px;
                  color: #CCCCCC;
                  font-weight: 400;
                  line-height: 52px;
                  margin-right: 14px;
                }
              }

              .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 16px;
                min-width: 140px;
                height: 52px;
                border-radius: 11px;
                opacity: 1;
                font-size: 19px;
                font-weight: 500;
                cursor: pointer;
                background: @primary-color;
                color: #ffffff;
                padding: 0 36px;
              }
            }
          }
        }
      }
    }
  }
	.col-e42{
		color:#E42D2D;
	}
}
</style>
